<template>
    <div class="stepTwo">
       <step-bar step="1"/>
       <div class="select company-nature">
           <p class="info container">请根据分类选择企业性质</p>
           <van-cell-group @click="chooseNatureName">
              <van-field v-model="form.natureName"  label="企业性质" right-icon="arrow" disabled/>
           </van-cell-group>
       </div>
        <div class="select conditions">
           <p class="info container">请选择符合企业的专项条件</p>
           <van-cell-group @click="chooseConditions">
              <van-field  label="专项条件" placeholder="可多选" right-icon="arrow" disabled/>
           </van-cell-group>
       </div>
       <div class="selected-box container">
           <span v-show="checkConditionList.length != 0">已选条件</span>
           <ul>
               <li v-for="(item,index) in checkConditionList" :key="index" >{{item.conditionContent}}<van-icon name="clear" color="#b5b5b5" size="14px" @click="deleteConditions(index)"/></li>
           </ul>
       </div>
       <p class="next-step">
            <van-button size="large" @click="nextStep" :loading="loadingState">下一步</van-button>
        </p>
         <!--企业性质选择框-->
        <van-popup v-model="natureShow" position="bottom">
            <van-tree-select
                :items="natureList"
                :main-active-index="mainActiveIndex"
                :active-id="form.natureId"
                @navclick="onNatureNavClick"
                @itemclick="onNatrueItemClick"
            />
        </van-popup>
        <!--企业专项条件选择框-->
        <van-dialog v-model="conditionShow" @confirm="confirmConditions">
            <van-icon name="clear" class="close-btn" @click="closeConditionBox"/>
            <p class="title">专项条件选择<span>（多选）</span></p>
            <van-collapse v-model="activeConditions" :border="borderVisible">
                <van-collapse-item :title="item.categoryName" :name="index" v-for="(item,index) in conditionList" :key="index">
                    <!-- <van-tag class="tag-num" color="@themeColor" round>2</van-tag> -->
                    <van-checkbox-group v-model="form.conditions">
                        <van-checkbox
                            v-for="conditionItem in item.conditionContentInfo"
                            :key="conditionItem.discountConditionId"
                            shape="square"
                            :name="conditionItem.discountConditionId"
                        >
                             {{ conditionItem.conditionContent }}
                             <van-button class="show-detail" size="mini" v-if="conditionItem.images.length != 0" @click="showImgs(conditionItem)">详情</van-button>
                        </van-checkbox>
                    </van-checkbox-group>
                </van-collapse-item>
            </van-collapse>
        </van-dialog>
    </div>
</template>

<script>
import { Toast,ImagePreview } from 'vant'
export default {
    data() {
        return {
            form: {
                natureName: '',
                natureId: '',
                conditions: []
            },
            natureShow: false,
            natureList: [],
            mainActiveIndex: 0,
            visibleCount: 5,
            conditionList: [],
            conditionShow: false,
            activeConditions: [0],
            borderVisible: false,
            checkConditionList: [],
            loadingState:false
        }
    },
    created() {
        this.getSpePolicyData()
        this.getEnterpriseNatureData()
    },
    computed: {
        userId() {
            return this.$storage.get('taxDiscount')?this.$storage.get('taxDiscount').userId:''
        },
        companyName() {
            return this.$route.params.companyName?this.$route.params.companyName:this.$storage.get('taxDiscount').companyName
        },
        nsrsbh() {
            return this.$route.params.nsrsbh?this.$route.params.nsrsbh:this.$storage.get('taxDiscount').nsrsbh
        },
        suorce() {
            return this.$storage.get('taxDiscountSource')?this.$storage.get('taxDiscountSource').source:'01'
        }
    },
    methods: {
        //关闭专项条件框                                                              
        closeConditionBox() {
            this.conditionShow = false
            this.form.conditions = []
            this.checkConditionList.map(item => {
               this.form.conditions.push(item.discountConditionId)
            })
        },
        //确认选择专项条件
        confirmConditions() {
            this.checkConditionList = []
            this.conditionList.map((item,index) => {
                item.conditionContentInfo.map(conditionItem => {
                    if(this.form.conditions.indexOf(conditionItem.discountConditionId) != -1) {
                        this.checkConditionList.push(conditionItem)
                    }
                })
            })
        },
        //查询用户信息
        queryUserInfo() {
            const data = {
                userId: this.userId
            }
            this.$axios
            .post(this.API.queryUserInfo,data)
            .then(res => {
                if(res.data.code == 100) {
                    const userInfo = res.data.userInfo
                    this.form.natureId = userInfo.enterpriseNatureId
                    this.form.natureName = userInfo.natureName
                    userInfo.conditionContentInfo.map((item,index) => {
                        this.form.conditions.push(item.discountConditionId) 
                    })
                    this.confirmConditions()
                }else{
                   Toast(res.data.mesg)
                }
            })
            .catch(err => {
                console.log(err)
            });
        },
        //查询专项条件
        getSpePolicyData() {
            this.$axios
            .post(this.API.specialPolicyQuery)
            .then(res => {
                if(res.data.code == 100) {
                    this.conditionList = res.data.data
                    if(this.userId) {
                        this.queryUserInfo()
                        this.activeConditions = this.$storage.get('taxDiscount').activeConditions
                    }
                }else{
                    Toast(res.data.mesg)
                }
            })
            .catch(err => {
                console.log(err)
            });
        },
        //查询企业性质
        getEnterpriseNatureData() {
             this.$axios
            .post(this.API.queryEnterpriseNature)
            .then(res => {
                if(res.data.code == 100) {
                    this.natureList = res.data.data
                }else{
                    Toast(res.data.mesg)
                }
            })
            .catch(err => {
                console.log(err)
            });
        },
       chooseNatureName() {
           this.natureShow = true
       },
        onNatureNavClick(index) {
            this.mainActiveIndex = index
        },
        onNatrueItemClick(data) {
            this.form.natureId = data.id
            this.form.natureName = data.text
            this.natureShow = false
        },
       chooseConditions() {
           this.conditionShow = true
       },
       //删除专项条件
       deleteConditions(idx) {
           this.checkConditionList.splice(idx,1)
           this.form.conditions = []
           this.checkConditionList.map(item => {
               this.form.conditions.push(item.discountConditionId)
           })
       },
       nextStep() {
            const data = {
                enterpriseName: this.companyName,
                discountProjectId: this.form.conditions.join(','),
                nsrsbh: this.nsrsbh,
                enterpriseNatureId: this.form.natureId,
                userId: this.userId,
                accessSource: this.suorce
            }
            if(data.enterpriseNatureId == ''&& data.discountProjectId == 0){
                Toast('请至少选择企业性质和专项条件其中一项')
                return
            }
            this.loadingState = true
            this.$axios
            .post(this.API.saveInfo,data)
            .then(res => {
                if(res.data.code == 100) {
                    //缓存专项条件折叠面板下标
                    this.activeConditions = []
                    this.conditionList.map((item,index) => {
                        let isChecked = false
                        item.conditionContentInfo.map(conditionItem => {
                            if(this.form.conditions.indexOf(conditionItem.discountConditionId) != -1) {
                                isChecked = true
                            }
                        })
                        if(isChecked) {
                            this.activeConditions.push(index)
                        }
                    })
                    this.$storage.add('taxDiscount','userId',res.data.userId)
                    this.$storage.add('taxDiscount','activeConditions',this.activeConditions)
                     this.loadingState = true
                    this.$router.direction = 'left'
                    this.goToParams('stepThree',{userId:res.data.userId})
                }else{
                    this.$message.error(res.data.mesg)
                }
            })
            .catch(err => {
                // console.log(err);
            })
       },
       showImgs(item) {
           ImagePreview({
            images: item.images,
            startPosition: 0,
            })
       }
    }
}
</script>

<style lang="less" scoped>
@themeColor: #6c52fb;
.select {
    background-color: #f5f5f5;
    .info {
        padding: 14px 0;
        color: #999;
        font-size: 24px;
    }
}

.tag-num {
    position: absolute;
    right: 80px;
    top: 16px;
    padding: 10px;
    font-size: 24px;
    text-align: center;
    border-radius: 50%;
}
.selected-box {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: top;
    span {
        font-size: 30px;
        color: #999;
    }
    ul{
        max-height: 700px;
        overflow-y: scroll;
        li{
            width: 547px;
            background-color: #ebe8fa;
            padding: 12px 15px;
            margin-bottom: 15px;
            color: @themeColor;
            font-size: 24px;
            line-height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            line-height: 30px;
        }
    }
}
</style>

<style lang="less">
@themeColor: #6c52fb;
.stepTwo {
    padding-top: 90px;
    .van-cell {
            padding: 20px 30px;
            font-size: 30px;
            .van-field__label {
                display: flex;
                align-items: center;
                max-width: 145px;
                color: #666;
                //margin-right: 25px;
            }
            .van-icon {
                font-size: 36px;
            }
        }
    .company-nature {
        .van-field__control:disabled {
            text-overflow: ellipsis;
            color: @themeColor;
        }
    }
    .van-dialog {
        padding: 30px 30px 60px;
        color: #333;
        border-radius: 0;
        .title {
            font-size: 30px;
            font-weight: bold;
            margin-bottom: 40px;
            span {
                color: #999;
            }
        }
        .van-collapse {
            height: 700px;
            overflow-y: scroll;
            .van-collapse-item {
                margin-bottom: 12px;
                position: relative;
                .van-collapse-item__title{
                    background-color: #f6f6f6;
                    height: 70px;
                    font-size: 28px;
                    line-height: 24px;
                    .van-icon {
                        height: 24px;
                        line-height: 24px;
                    }
                }
                .van-collapse-item__content {
                    font-size: 28px;
                    padding: 15px;
                    .van-checkbox {
                        display: flex;
                        align-items: center;
                        margin-bottom: 10px;
                        .van-checkbox__icon {
                            height: 32px;
                            line-height: 32px;
                            .van-icon {
                                width: 32px;
                                height: 32px;
                                font-size: 24px;
                            }
                        }
                        .van-checkbox__icon--checked {
                            .van-icon {
                                background-color: @themeColor;
                                border-color: @themeColor;
                            }
                        }
                        .van-checkbox__label {
                            width: 85%;
                            // .van-button {
                            //     width: 40px;
                            //     font-size: 20px;
                            // }
                        }
                    }
                }
            }
        }
        .van-dialog__footer {
            margin-top: 45px;
            .van-button {
                height: 80px;
                line-height: 80px;
                background-color: @themeColor;
                color: #fff;
                font-size: 30px;
            }
        }
    }
    .van-tree-select {
        .van-tree-select__nav {
            color: #666;
            .van-tree-select__nitem--active {
                color: #333;
                font-weight: normal;
            }
            .van-ellipsis{
            &::after {
                background-color: @themeColor;
                }
                    
            }
        }
        .van-tree-select__content {
            color: #333;
            .van-tree-select__item {
                font-weight: normal;
            }
            .van-ellipsis {
                width: 90%;
                .van-tree-select__selected {
                    right: 0;
                    z-index: 10;
                }
            }
            .van-tree-select__item--active {
                color: @themeColor;
            }
        }
    }
}
</style>